<script>
export default {
  name: "chat-input-box",
  data() {
    return {
      requestParam: {
        value: "",
      },
    };
  },
  methods: {
    sendContent() {
      if (this.requestParam.value) {
        this.$emit("sendContent", this.requestParam.value);
        this.requestParam.value = "";
      }
    },
    chooseImage() {
      this.$emit("chooseImage");
    },
    toSummary() {
      this.$emit("toSummary");
    },
    toChange() {
      this.$emit("toChange");
    },
  },
}
</script>

<template>
  <view style="width:100%;position: relative">

    <view
        style="display: inline-block;width: calc(100% - 100rpx)"
        class="chat-footer-input-container">
          <textarea
              :adjust-position="false"
              auto-height
              @change="change()"
              v-model="requestParam.value"
              @input="requestParam.value = $event.detail.value"
              :placeholder="$i18n.zhToGlobal('请输入111')"
              maxlength="99999"
              class="chat-footer-input"/>
    </view>
    <view class="chat-footer-send-container btn"
          @click="sendContent()"
          style="display: inline-block;width: 100rpx;
            text-align: center;position: relative">
      <image
          v-if="requestParam.value"
          class="icon"
          style="position: absolute;width: 50rpx;height: 50rpx;left:50%;transform: translate(-50%,calc(-100% - 10rpx));"
          :src="$kt.file.byPath('icon/plan.svg')"
      ></image>
      <image
          class="icon"
          style="position: absolute;width: 50rpx;height: 50rpx;left:50%;transform: translate(-50%,calc(-100% - 10rpx));opacity: .6"
          :src="$kt.file.byPath('icon/plan.svg')"
      ></image>
    </view>

    <view style="box-sizing: border-box;color:#666666">
      <u-grid :span="3">
        <u-grid-item
            @click="chooseImage"
        >
          <!--            {{$i18n.zhToGlobal('图片')}}-->
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/image.svg')"></image>
        </u-grid-item>
        <u-grid-item
            @click="toSummary">
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/robot_black.svg')"></image>
        </u-grid-item>
        <u-grid-item
            @click="toChange">
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/change.svg')"></image>

        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<style scoped lang="scss">

.chat-footer-input-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.chat-footer-input {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  padding: 10rpx;
  border-radius: 10rpx;
  max-height: 200rpx;
  // 超出可拖动
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }
}

// 让textarea 高度自适应
.chat-footer-input {
  height: 100%;
  width: 100%;
  padding: 15rpx;
}


.btn:active {
  opacity: .8;
}

.chat-footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  //background-color: #FFFFFF;
  padding-top: 40rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);

}

.b-icon {
  width: 40rpx;
  height: 40rpx;
}

</style>